<template>
    <div class="login-container">
      <!-- 导航栏 -->
      <van-nav-bar class="page-nav-bar" title="标题" />
  
      <!-- 登录表单 -->
      <van-form @submit="onSubmit" ref="loginForm">
        <van-field name="mobile" 
        placeholder="请输入手机号" 
        v-model.trim="user.mobile"
        :rules="userFormRules.mobile"

        >
          <i slot="left-icon" class="toutiao toutiao-shouji"></i>
        </van-field>
        <van-field 
        type="password" 
        name="验证码" placeholder="请输入验证码" 
        v-model.trim="user.code"
        :rules="userFormRules.code"
        
        
        >
          <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
          <template #button>
            <van-button 
            class="send-sms-btn" 
            size="small" 
            type="primary"
            @click="sendCode" 
            native-type="button">发送验证码</van-button>
          </template> 
        </van-field>
        <div class="login-btn-wrap" style="margin: 16px;">
          <van-button class="login-btn" block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </template>
  
  <script>
  import { login ,sendSms} from '@/api/user'
  // import { sendSms } from '@/api/user'
  export default {
    name: 'LoginIndex',
  components: {},
  props: {},
    data () {
        
          return {
                userFormRules: {
                    mobile: [
                        {
                            required: true,
                            message: '手机号不能为空'
                        },
                        {
                            pattern: /^1[3|5|7|8]\d{9}$/,
                            message: '手机号格式错误'
                        }
                    ],
                    code: [
                        {
                            required: true,
                            message: '验证码不能为空'
                        },
                        {
                            pattern: /^\d{6}$/,
                            message: '验证码格式错误'
                        }
                    ]
                },
            
      }
    },
    methods: {
      // 表单提交事件
      methods: {
          async sendCode() {
            await this.$refs.loginForm.validate('mobile')
            console.log('验证通过')
            const res = await sendSms(this.user.mobile)
      console.log(res.data)
    }
  },
     async onSubmit (values) {
              console.log('submit', values)
              //获取表单数据
              const user = this.user
                //表单验证  
              this.$toast.loading({
                    message: '登陆中...',
                    forbidClick: true,//禁用背景点击
                    duration:0 //持续时间，默认是2000，如果为0 则持续展示
                })
              try {
                    const res = await login(user)
                    console.log(res);
                this.$toast.success('登录成功')
                } catch (error) {
                    if (error.response.status === 400) {
                        this.$toast.fail('手机号或验证码错误')
                        //轻提示
                      } else {
                        this.$toast.fail('登录失败，请稍后重试')
                }
            }
      },
      login () {
      console.log('登录')
    }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .login-container {
    .toutiao {
      font-size: 37px;
    }
    .send-sms-btn {
      width: 152px;
      height: 46px;
      line-height: 46px;
      background-color: #ededed;
      font-size: 22px;
      color: #666;
    }
    .login-btn-wrap {
      padding: 53px 33px;
      .login-btn {
              
        background-color: #6db4fb;
        border: none;
      }
    }
  }
  
  /deep/ .van-button--primary {
    border-color: #1989fa !important;
  }
  </style>
  
  